import styled from "styled-components";
import {Select, Button, Slider, Tooltip, message, Input} from 'antd'
import {PlusOutlined, MinusOutlined} from '@ant-design/icons'
import {useRef, useState} from "react";

function Flex() {

    const flexSelect = [
        {
            title: 'flex-direction',
            subtitle: 'flexDirection',
            selectOption: ['row', 'row-reverse', 'column', 'column-reverse']
        },
        {
            title: 'flex-wrap',
            subtitle: 'flexWrap',
            selectOption: ['nowrap', 'wrap', 'wrap-reverse']
        },
        {
            title: 'justify-content',
            subtitle: 'justifyContent',
            selectOption: ['flex-start', 'flex-end', 'center', 'space-between', 'space-around', 'space-evenly']
        },
        {
            title: 'align-items',
            subtitle: 'alignItems',
            selectOption: ['stretch', 'flex-start', 'flex-end', 'center', 'baseline', 'first baseline', 'last baseline']
        },
        {
            title: 'align-content',
            subtitle: 'alignContent',
            selectOption: ['stretch', 'flex-start', 'flex-end', 'center', 'baseline', 'first baseline', 'last baseline']
        },
    ]

    interface IFlexStyle {
        [key: string]: string
    }

    const [flexStyle, setFlexStyle] = useState<IFlexStyle>({
        display: 'flex',
        flexDirection: 'row',
        flexWrap: 'nowrap',
        justifyContent: 'flex-start',
        alignItems: 'stretch',
        alignContent: 'stretch'
    })

    function handleSelectChange(title: string, e: string) {
        console.log(title, e)
        setFlexStyle({...flexStyle, [title]: e})
    }

    const [itemOption, setItemOption] = useState({
        itemArr: [
            {
                order: '',
                flexGrow: '',
                flexShrink: '',
                flexBasis: '',
                alignSelf: ''
            }
        ],
        width: 150,
        height: 'auto'
    })

    const flexBox = useRef<HTMLDivElement>(null)

    function handleClickAdd(isAdd: boolean) {
        const arr = JSON.parse(JSON.stringify(itemOption.itemArr))
        if (isAdd) {
            if (flexStyle.flexWrap === 'nowrap' && flexBox.current) {
                console.log(flexBox.current.scrollWidth)
                const divWidth = flexBox.current.scrollWidth
                const sumWidth = arr.length * 90 + arr.length * 10
                console.log('sumWidth', sumWidth)
                console.log('divWidth', divWidth)
                if (divWidth < sumWidth + itemOption.width) {
                    message.error('不能再添加啦！')
                    return false
                }
            }
            arr.push({
                order: '',
                flexGrow: '',
                flexShrink: '',
                flexBasis: '',
                alignSelf: ''
            })
        } else {
            arr.pop()
        }
        setItemOption({...itemOption, itemArr: arr})
    }

    function handleInputChange(e: string | null, index: number, key: string) {
        console.log(e, index, key)
        const arr = JSON.parse(JSON.stringify(itemOption.itemArr))
        arr[index][key] = e
        setItemOption({...itemOption, itemArr: arr})
    }

    return (
        <IndexDiv>
            <div className="flex flex-wrap">
                {flexSelect.map(item => (
                    <div className="w-1/5 mt-1 p-2 min-w-[170px]" key={item.title}>
                        <div className="font-bold">
                            {item.title}
                        </div>
                        <div className="mt-[10px]">
                            <Select
                                showSearch
                                className="w-[150px]"
                                defaultValue={item.selectOption[0]}
                                options={item.selectOption.map(item2 => ({value: item2, label: item2}))}
                                onChange={(e: string) => handleSelectChange(item.subtitle, e)}
                            />
                        </div>
                    </div>
                ))}
            </div>
            <div className="flex flex-wrap">
                <div className="min-w-[200px] mr-[20px]">
                    <span className="mr-[10px]"><b>数量：</b>{itemOption.itemArr.length}</span>
                    <span>
                        <Button onClick={() => handleClickAdd(false)} className="mr-[5px]"
                                icon={<MinusOutlined/>}></Button>
                        <Button onClick={() => handleClickAdd(true)} type="primary"
                                icon={<PlusOutlined style={{color: '#fff'}}/>}></Button>
                    </span>
                </div>
                <div className="flex items-center flex-wrap">
                    <span className="mr-[10px] min-w-[80px]"><b>宽度：</b>{itemOption.width}px</span>
                    <Slider className="w-[40vw]" defaultValue={itemOption.width} max={600} min={100}
                            onChange={e => setItemOption({...itemOption, width: e})}/>
                </div>
            </div>
            <div ref={flexBox} className="min-h-[360px] bg-blue-400 mt-[20px] rounded-[4px]" style={flexStyle}>
                {
                    itemOption.itemArr.map((item, index) => (
                        <div key={index} className="bg-red-200 m-1 rounded-[4px] p-[5px] min-w-[80px]" style={{
                            width: itemOption.width,
                            height: itemOption.height,
                            order: item.order,
                            flexGrow: item.flexGrow,
                            flexShrink: item.flexShrink,
                            flexBasis: item.flexBasis,
                            alignSelf: item.alignSelf
                        }}>
                            <Tooltip trigger={['focus']} title="排序：1,inherit,initial,unset" placement="topLeft">
                                <Input rootClassName="mb-[5px] w-[100%]" min='0'
                                       onChange={e => handleInputChange(e.target.value, index, 'order')}
                                       value={item.order} placeholder="order"/>
                            </Tooltip>
                            <Tooltip trigger={['focus']} title="拉伸：1,inherit,initial,revert,unset"
                                     placement="topLeft">
                                <Input rootClassName="mb-[5px] w-[100%]" min='0'
                                       onChange={e => handleInputChange(e.target.value, index, 'flexGrow')}
                                       value={item.flexGrow} placeholder="flex-grow"/>
                            </Tooltip>
                            <Tooltip trigger={['focus']} title="压缩：1,inherit,initial,unset" placement="topLeft">
                                <Input rootClassName="mb-[5px] w-[100%]" min='0' max='1'
                                       onChange={e => handleInputChange(e.target.value, index, 'flexShrink')}
                                       value={item.flexShrink} placeholder="flex-shrink"/>
                            </Tooltip>
                            <Tooltip trigger={['focus']} title="初始大小：1px,auto,fill,content" placement="topLeft">
                                <Input rootClassName="mb-[5px] w-[100%]" min="100" max="600"
                                       onChange={e => handleInputChange(e.target.value, index, 'flexBasis')}
                                       value={item.flexBasis} placeholder="flex-basis"/>
                            </Tooltip>
                            <Select className="w-[100%]"
                                    defaultValue="auto"
                                    onChange={e => handleInputChange(e, index, 'alignSelf')}
                                    options={[
                                        {value: 'auto', label: 'align-self:auto'},
                                        {value: 'stretch', label: 'align-self:stretch'},
                                        {value: 'center', label: 'align-self:center'},
                                        {value: 'start', label: 'align-self:start'},
                                        {value: 'end', label: 'align-self:end'},
                                    ]}
                            />
                        </div>
                    ))
                }
            </div>
            {/*<div className="h-[1200px] bg-red-200"></div>*/}
        </IndexDiv>
    )
}

Flex.propTypes = {};

const IndexDiv = styled.div`
    justify-content: space-evenly;
`

export default Flex;